<link rel="stylesheet" href="${request.contextPath}/static/oms/default/plugins/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link href="${request.contextPath}/static/oms/iframe/plugins/bootstrap-icon-picker/css/icon-picker.css"  rel="stylesheet" type="text/css" />
<div class="row">
	<div class="col-md-12">
		<div class="box-body  no-padding">
			<form id="view-from" class="form-horizontal" method="post" onsubmit="return false">
				<input type="hidden" class="form-control" name="id"  id="noteCategoryId"  value="${noteCategory.id}" >
				<div class="form-group">
					<label for="noteCategoryName" class="col-sm-2 control-label">名称</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" name="name"  id="noteCategoryName"  value="${noteCategory.name}" placeholder="输入名称...">
					</div>
					<div class="form-group">
						<label for="noteCategoryUsername" class="col-sm-1 control-label">用户名</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" name="username" id="noteCategoryUsername"  value="${noteCategory.username}" placeholder="输入用户名...">
						</div>
					</div>

				</div>
				<div class="form-group">
					<label id="noteCategoryParentIdLabel" for="noteCategoryParentId" class="col-sm-2  control-label">上级资源</label>
					<div class="col-sm-9">
						<div class="input-group">
							<input type="hidden" class="form-control" id="noteCategoryParentId" name="parentId"  value="${noteCategory.parentId}" >
							<input type="text" class="form-control"  id="noteCategoryParentName" value="" placeholder="选择上级资源...">
							<span class="input-group-addon"><i class="glyphicon glyphicon-remove" style="color: #FF0000;" id="noteCategoryParentIdClear"></i></span>
							<div id="noteCategoryContent" class="noteCategoryContent" style="position: absolute; left: 0; top: 25px; display: none;z-index: 999999;">
								<ul id="noteCategoryParentTree" class="ztree" style="margin-top: 10px;
																border: 1px solid #d6e0df;
																background: #fbfbfb;
																width: 220px;
																height: 360px;
																overflow-y: scroll;
																overflow-x: auto; -moz-user-select: none;">
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label id="noteCategorySortOrderLabel" for="noteCategorySortOrder" class="col-sm-2  control-label">排序号</label>
					<div class="col-sm-2">
						<input class="form-control" name="sortOrder" id="noteCategorySortOrder" type="number" value="${noteCategory.sortOrder}" placeholder="输入排序号...">
					</div>
					<label id="noteCategoryStatusLabel" for="noteCategoryStatus" class="col-sm-1  control-label">状态</label>
					<div class="col-sm-2">
						<select class="form-control" id="noteCategoryStatus"  name="status"  value="" style="width: 100%;">
						</select>
					</div>
					<label id="noteCategoryAccessLevelLabel" for="noteCategoryAccessLevel" class="col-sm-2  control-label">访问级别</label>
					<div class="col-sm-2">
						<select class="form-control" id="noteCategoryAccessLevel" name="accessLevel"  value=""  >
						</select>
					</div>
				</div>
				<div class="form-group">
					<label id="noteCategoryDescriptionLabel" class="col-sm-2 control-label" >描述</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" name="description" id="noteCategoryDescription"  value="${noteCategory.description}" placeholder="输入描述...">
					</div>
				</div>
				<div class="form-group">
					<label id="noteCategoryRemarkLabel" class="col-sm-2 control-label">备注</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" name="remark" id="noteCategoryRemark"  value="${noteCategory.remark}"  placeholder="输入备注...">
					</div>
				</div>
				<div class="error-message text-center" >
					<span class="error-icon"></span>
					<span id="error-msg" class="error-msg" ></span>
				</div>
				<div class="box-footer">
					<div class="pull-right">
						<button type="button" class="btn btn-default btn-sm" id="close" data-dismiss="modal"><i class="fa fa-close"></i>关闭</button>
					</div>
				</div>
			</form>
		</div>

	</div>
</div>
<script type="text/javascript" src="${request.contextPath}/static/oms/default/plugins/zTree/jquery.ztree.all.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/oms/iframe/plugins/bootstrap-icon-picker/js/iconPicker.js"></script>

<script type="text/javascript">
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: null
            }
        },
        async: {
            enable: true,
            url:"/notepad/note/category/tree",
            dataFilter:function (treeId, parentNode, responseData) {
                if (responseData) {
                    for(var i =0; i < responseData.length; i++) {
                        responseData[i].url = null;
                    }
                }
                return responseData;
            }
        },
        callback:{
            onAsyncSuccess:function (event, treeId) {
                var node = $.fn.zTree.getZTreeObj(treeId).getNodeByParam("id", $("#noteCategoryParentId").val());
                if(node){
                    $("#noteCategoryParentName").val(node.name);
                }
            },
            onClick :function (event, treeId, treeNode) {
                $("#noteCategoryParentId").val(treeNode.id);
                $("#noteCategoryParentName").val(treeNode.name);
                $('#noteCategoryContent').hide();
            }
        }
    };

    $(function() {

        $("#noteCategoryIcon").iconPicker();


        $("#noteCategoryAccessLevel").select2({
            data: AccessLevelStore,
            language: "zh-CN",
            theme: "bootstrap"
        });
        $("#noteCategoryAccessLevel").select2('val','${noteCategory.accessLevel}');


        $("#noteCategoryStatus").select2({
            data: StatusStore,
            language: "zh-CN",
            theme: "bootstrap"
        });
        $("#noteCategoryStatus").select2("val",'${noteCategory.status}');

        var $noteCategoryUsername = $("#noteCategoryUsername");
        if($noteCategoryUsername.val()){
            setting.async.url="/notepad/note/category/tree?username="+$noteCategoryUsername.val();
            $.fn.zTree.init($('#noteCategoryParentTree'), setting);
        }
        $noteCategoryUsername.on('blur',function () {
            var $this = $(this);
            if($this.val()){
                setting.async.url="/notepad/note/category/tree?username="+$this.val();
                $.fn.zTree.init($('#noteCategoryParentTree'), setting);
            }
        });

        $("#noteCategoryParentName").on('click',function () {
            var $noteCategoryContent = $('#noteCategoryContent');
            $noteCategoryContent.css("display")==='none'?$noteCategoryContent.show():$noteCategoryContent.hide();
        });
        $("#noteCategoryContent").mouseleave(function () {
            $('#noteCategoryContent').hide();
        });

        $("#noteCategoryParentIdClear").on('click',function () {
            $("#noteCategoryParentId").val("");
            $("#noteCategoryParentName").val("");
        });
    });
</script>
